<template>
    <a-form auto-label-width size="mini" layout="vertical">
        <a-form-item :label="customTranslate('Candidate Starter Users')">
            <a-select v-model="candidateStarterUsers" multiple :max-tag-count="2" allow-clear>
                <a-option v-for="(user,index) in users" :value="user.value" :key="index">{{user.name}}</a-option>
            </a-select>
        </a-form-item>
        <a-form-item :label="customTranslate('Candidate Starter Groups')">
            <a-select v-model="candidateStarterGroups" multiple :max-tag-count="2" allow-clear>
                <a-option v-for="(group,index) in groups" :value="group.value" :key="index">{{group.name}}</a-option>
            </a-select>
        </a-form-item>
    </a-form>
</template>

<script>
import { inject, toRaw } from "vue";
import customTranslate from "../../translate/customTranslate";

export default {
    name: 'candidateStart',
    props: ["element"],
    data() {
        return {
            candidateStarterGroups: "",
            candidateStarterUsers: ""
        }
    },
    setup() {
        const bpmnModeler = inject("bpmnModeler");
        const users = inject("users");
        const groups = inject("groups");
        return {
            bpmnModeler,
            users,
            groups,
            customTranslate
        };
    },
    mounted() {
        console.log(this.element);
        this.candidateStarterGroups = this.element?.businessObject?.candidateStarterGroups || [];
        this.candidateStarterUsers = this.element?.businessObject?.candidateStarterUsers || [];
    },
    watch: {
        candidateStarterGroups: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling?.updateProperties(toRaw(this.element), {
                    "flowable:candidateStarterGroups": newVal,
                });
            }
        },
        candidateStarterUsers: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling?.updateProperties(toRaw(this.element), {
                    "flowable:candidateStarterUsers": newVal,
                });
            }
        },
    },
}
</script>

<style lang="scss" scoped>

</style>